<!DOCTYPE html>
<html lang="en">
<style>
    style{
        display: inline-block;
    }
</style>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="../css文件/index.css">

</head>
<body>
    <!-- 导航栏开始-->
    <nav>
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="col-md-11">
                        <ul>
                            <li>
                                <a href="#" class="">慕课网首页</a>
                            </li>
                            <li>
                                <a href="#">免费课</a>
                            </li>
                            <li>
                                <a href="./实践课.html">实战课</a>
                            </li>
                            <li>
                                <a href="./体系课.html">体系课</a>
                            </li>
                            <li>
                                <a href="#">慕课教程</a>
                            </li>
                            <li>
                                <a href="#">专栏</a>
                            </li>
                            <li>
                                <a href="#">手记</a>
                            </li>
                        </ul>
                    </div>
                    <!-- <div class="col-md-1">
                            
                        </div> -->


                </div>
                <div class="col-md-3">
                    <ul>

                        <li>
                            <span class="glyphicon glyphicon-search"></span>
                            <a href="#">收藏网站</a>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-shopping-cart"></span>
                        </li>
                        <!-- <li>
                            <a href="#">登录 / 注册</a>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!-- 导航栏结束-->

    <!-- 头部开始-->
    <header>
        <div class="container">
            <div class="row">

                <!-- 第一行 -->
                <div class="col-md-3">
                    <div class="col-md-4">
                        <img class="img_1" src="./img——1/course-title2.png" alt="">
                        <img class="img_2" src="./img——1/course-top.png" alt="">
                    </div>
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <input type="text" placeholder="搜索感兴趣的免费课内容">
                        <span>
                            <i class="glyphicon glyphicon-search"></i>
                        </span>
                        <div>
                            <a href="#">热搜：</a>
                            <a href="#">Java工程师</a>
                            <a href="#">Vue</a>
                            <a href="#">Python</a>
                            <a href="#">Go</a>
                        </div>
                    </div>
                </div>
                <!-- 第一行 -->

                <!-- 第二行 -->
                <div class="col-md-2">
                    <div class="box_1 box1_1">
                        <span>方向：</span>
                        <ul>
                            <li class="li_1"><a href="#">全部</a></li>
                            <li class="li_111"><a href="#">前端开发</a></li>
                            <li class="li_111"><a href="#">后端开发</a></li>
                            <li class="li_111"><a href="#">移动开发</a></li>
                            <li class="li_111"><a href="#">计算机基础</a></li>
                            <li class="li_111"><a href="#">前沿技术</a></li>
                            <li class="li_111"><a href="#">云计算&大数据</a></li>
                            <li class="li_111"><a href="#">运维&测试</a></li>
                            <li class="li_111"><a href="#">数据库</a></li>
                            <li class="li_111"><a href="#">U设计&多媒体</a></li>
                            <li class="li_111"><a href="#">游戏</a></li>
                            <li class="li_111"><a href="#">求职面试</a></li>
                        </ul>
                    </div>
                    <!-- 第二行结束 -->

                    <!-- 第三行 -->
                    <div class="col-md-2">
                        <div class="box_1">
                            <span>分类：</span>
                            <ul>
                                <li class="li_1"><a href="#">全部</a></li>
                                <li><a href="#">JavaScript</a></li>
                                <li><a href="#">HTML/CSS</a></li>
                                <li><a href="#">Vue.js</a></li>
                                <li><a href="#">React.JS</a></li>
                                <li><a href="#">Angular</a></li>
                                <li><a href="#">Node.js</a></li>
                                <li><a href="#">jquery</a></li>
                                <li><a href="#">Bootstrap</a></li>
                                <li><a href="#">Sass/Less</a></li>
                                <li><a href="#">WebApp</a></li>
                                <li><a href="#">小程序</a></li>
                                <li><a href="#">前端工具</a></li>
                            </ul>
                        </div>
                    </div>

                    <!-- 第四行 -->
                    <div class="col-md-2">
                        <div class="box_1">
                            <span>难度：</span>
                            <ul>
                                <li class="li_1"><a href="#">全部</a></li>
                                <li><a href="#">零基础</a></li>
                                <li><a href="#">初阶</a></li>
                                <li><a href="#">进阶</a></li>
                                <li><a href="#">高阶</a></li>
                            </ul>

                        </div>
                    </div>

                    <div class="col-md-3 div_4">

                        <span>全部</span>
                        <span> <a href="#">免费课</a></span>
                        <span>项目实战</span>
                        <em></em>
                        <a href="#" class="a_1">
                            <div>
                                <i></i>
                                <span>一分钟获得个性化课程推荐</span>
                            </div>
                        </a>

                    </div>
                </div>
            </div>
    </header>
    <!-- 头部结束-->

    <!-- 最新最热开始 -->
    <section>
        <div class="box_10">
            <ul>
                <li class="li_1">
                    <img src="./img——1/1.png" alt="">
                    <p class="p_1">如何从0到1,写出一份完美的PRD文档</p>
                    <p class="p_2">零基础 825人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/2.png" alt="">
                    <p class="p_1">玩转组件库搭建全流程</p>
                    <p class="p_2">零基础 825人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/3.png" alt="">
                    <p class="p_1">Swagger接口文档神器</p>
                    <p class="p_2">零基础 825人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/4.png" alt="">
                    <p class="p_1">Vite零基础快速入门</p>
                    <p class="p_2">零基础 3069人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>

                </li>
                <li>
                    <img src="./img——1/5.png" alt="">
                    <p class="p_1">SpringBoot.x手把手零基础入门与进阶</p>
                    <p class="p_2">零基础 825人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>

                </li>
                <li>
                    <img src="./img——1/6.png" alt="">
                    <p class="p_1">Maven项目依赖</p>
                    <p class="p_2">零基础 9359人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/7.png" alt="">
                    <p class="p_1">Python数据分析挖掘实战</p>
                    <p class="p_2">零基础 14456人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/8.png" alt="">
                    <p class="p_1">Django REST framework前后端分离框架实践></p>
                    <p class="p_2">零基础 3854人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>

                </li>
                <li>
                    <img src="./img——1/9.png" alt="">
                    <p class="p_1">墨刀快速入门到精通</p>
                    <p class="p_2">零基础 2449人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>

                </li>
                <li>
                    <img src="./img——1/10.png" alt="">
                    <p class="p_1">MySQL多版本并发</p>
                    <p class="p_2">零基础 1928人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>

                </li>
                <li>
                    <img src="./img——1/11.png" alt="">
                    <p class="p_1">人工智能--语音入门</p>
                    <p class="p_2">零基础 3393人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>

                </li>
                <li>
                    <img src="./img——1/12.png" alt="">
                    <p class="p_1">趣味 C++ 入门</p>
                    <p class="p_2">零基础 9725人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>

                </li>
                <li>
                    <img src="./img——1/13.png" alt="">
                    <p class="p_1">vue3.0实现todolist</p>
                    <p class="p_2">零基础 9411人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/14.png" alt="">
                    <p class="p_1">元旦贺卡</p>
                    <p class="p_2">零基础 4784人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/15.png" alt="">
                    <p class="p_1">响应式布局</p>
                    <p class="p_2">零基础 2449人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/16.jpg" alt="">
                    <p class="p_1">函数式编程</p>
                    <p class="p_2">零基础 11393人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/17.jpg" alt="">
                    <p class="p_1">全方位入门git</p>
                    <p class="p_2">零基础 17597人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/18.jpg" alt="">
                    <p class="p_1">Java继承和多态</p>
                    <p class="p_2">零基础 2449人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/19.jpg" alt="">
                    <p class="p_1">Al小白入学&求职指南</p>
                    <p class="p_2">零基础 3789人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
                <li>
                    <img src="./img——1/20.jpg" alt="">
                    <p class="p_1">Tensorflow.js实现垃圾分类</p>
                    <p class="p_2">零基础 3468人报名</p>
                    <p class="p_3">免费</p>
                    <div>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="p_4">收藏</span>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <!-- 最新最热结束 -->

    <!-- 分页开始 -->
    <div id="box">
        <div>
            <span>首页</span>
            <span>分页</span>
            <a href="#" class="z-11">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#">7</a>
            <span>下一页</span>
            <span>尾页</span>
        </div>
    </div>
    <!-- 分页结束 -->
   
    <!-- 尾部开始 -->
    <footer>
        <div id="box_1">
            <div id="box_2">
                <div id="box_3">
                    <ul>
                        <li>
                            <a href="#">网站地图</a>
                        </li>
                        <li>
                            <a href="#">网站首页</a>
                        </li>
                        <li>
                            <a href="#">企业服务</a>
                        </li>
                        <li>
                            <a href="#">关于我们</a>
                        </li>
                        <li>
                            <a href="#">联系我们</a>
                        </li>
                        <li>
                            <a href="#">讲师招募</a>
                        </li>
                        <li>
                            <a href="#">帮助我们</a>
                        </li>
                        <li>
                            <a href="#">联系我们</a>
                        </li>
                        <li>
                            <a href="#">意见反馈</a>
                        </li>
                        <li>
                            <a href="#">慕课大学</a>
                        </li>
                        <li>
                            <a href="#">代码托管</a>
                        </li>
                    </ul>
                    <p>Copyright <img src="./img——1/a9.png" style="width: 16px;height: 16px;margin-top: -8px;">
                        2021 imooc.com All Reserved |京lCP备 12003892号-11
                        <img src="./img——1/警徽.png " style="width: 16px;height: 16px;">京公网安备11010802030151号</p>
                    <div id="box_4">
                        <span class="span_1"></span>

                        <span class="span_2"></span>

                        <span class="span_3"></span>

                        <span class="span_4"></span>
                    </div>
                    <div id="box_5">
                        <ul>
                            <li><a href="#">收藏网站</a></li>
                            <li><a href="#">官方微信</a></li>
                            <li><a href="#">官方微博</a></li>
                            <li><a href="#">官方空间</a></li>
                        </ul>
                    </div>
                </div>
            </div>


        </div>
    </footer>
    <!-- 尾部结束 -->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
    </script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
    <script src="./index.js"></script>

</body>

</html>